<script type="text/javascript">
	$(document).ready(function () {
		var shiftkerja_task = "CREATE";
		var btn_shiftkerja = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
		var editrow = -1;
		
		var navbar = $("#jqxNavigationBar");
		navbar.jqxNavigationBar({ width: '100%', height: 420, sizeMode: 'auto', theme: theme });
		
		/* START DATA */
		// prepare the data
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'NAMASHIFT' },
				{ name: 'VALIDTO' },
				{ name: 'KETERANGAN' }
			],
			id: 'NAMASHIFT',
			url: 'index.php?c=c_shiftkerja&m=get_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		
		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
			filterable: true,
			pageable: true,
			autoheight: true,
			columns: [
				{ text: 'NAMASHIFT', dataField: 'NAMASHIFT', width: 280 },
				{ text: 'VALIDTO', dataField: 'VALIDTO', width: 280 },
				{ text: 'KETERANGAN', dataField: 'KETERANGAN', width: 280 },
				{ text: '', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				},
				{ text: '', datafield: 'Hapus', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Hapus";
				}, buttonclick: function (row) {
					if(confirm("Yakin data akan dihapus?")){
						// open form Create/Update.
						editrow = row;
						
						// get the clicked row's data and initialize the input fields.
						var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
						cu_formDel(dataRecord);
					}
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
		$('.text-input').addClass('jqx-input');
		$('.text-input').addClass('jqx-rc-all');
		$('.text-input').width(200);
		$('.text-input').height(23);
		if (theme.length > 0) {
			$('.text-input').addClass('jqx-input-' + theme);
			$('.text-input').addClass('jqx-widget-content-' + theme);
			$('.text-input').addClass('jqx-rc-all-' + theme);
		}
		
		var txt_namashift = $("#sk_namashift");
		var txt_validto = $("#sk_validto");
		var txt_keterangan = $("#sk_keterangan");
		txt_keterangan.height(48);
		txt_keterangan.bind('keypress', function(e) {
      		if ((e.keyCode || e.which) == 13) {
        	    return false;
       		}
		});
		
		var create_btn = $("#createBtn");
		var save_btn = $("#Save");
		var cancel_btn = $("#Cancel");
		var export_excel_btn = $("#exportExcelBtn");
		var export_pdf_btn = $("#exportPdfBtn");
		var export_print_btn = $("#exportPrintBtn");
		
		// initialize the popup window and buttons.
		create_btn.jqxButton({ theme: theme });
		save_btn.jqxButton({ theme: theme });
		cancel_btn.jqxButton({ theme: theme });
		export_excel_btn.jqxButton({ theme: theme });
		export_pdf_btn.jqxButton({ theme: theme });
		export_print_btn.jqxButton({ theme: theme });
		
		var shiftkerjaForm = $('#shiftkerjaForm');
		shiftkerjaForm.jqxValidator({
			rules: [
				{ input: txt_namashift, message: 'Nama Shift harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_validto, message: 'Valid to harus diisi!', action: 'keyup', rule: 'required' }
				],
			theme: theme
		});
		
		var saving_notice = $("#saveGradeNotice");
		var ok = $("#ok");
		var message_notice = $('#eventLog');
		saving_notice.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05, position: { x: 400, y: 100 } });
		ok.jqxButton({ theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the user clicks the 'Save' button.
        save_btn.click(function () {
			var form_validate = shiftkerjaForm.jqxValidator('validate');
			if(form_validate){
				var sk_namashift_f = "";
				var sk_validto_f = "";
				var sk_keterangan_f = "";
				
				if(txt_namashift.val() !== null){
					sk_namashift_f = txt_namashift.val();
				}
				if(txt_validto.val() !== null){
					sk_validto_f = txt_validto.val();
				}
				if(txt_keterangan.val() !== null){
					sk_keterangan_f = txt_keterangan.val();
				}
				
				var row = {
					task: shiftkerja_task,
					namashift: sk_namashift_f,
					validto: sk_validto_f,
					keterangan: sk_keterangan_f
				};
				
				if (editrow >= 0) {
					//edit row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_shiftkerja&m=get_action',
						data: row,
						success: function(response){
							//if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							//}
						}
					});
				}else{
					//add row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_shiftkerja&m=get_action',
						data: row,
						success: function(response){
							if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							}
						}
					});
					
				}
			}else{
				createNotice("Isian data belum lengkap!");
			}
        });

        cancel_btn.click(function () {
        	cu_formReset();
        	$("#popupWindow").jqxWindow('hide');
        	gridExpand();
        });
		
	create_btn.click(function () {
        	btn_shiftkerja = "CREATE";			
        	cu_formReset();			
        	formExpand();
		txt_namashift.focus();
        });
		
	ok.click(function(){
        	message_notice.empty();
        	saving_notice.jqxWindow('hide');
        });
		
		export_excel_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_shiftkerja&m=export_excel',
				data: {rows: rowsdata},
				success: function(response){
					if(response==1){
						win = window.location=('./documents/shiftkerja.xlsx');
					}
				}
			});
		}
	});
	
	export_pdf_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_shiftkerja&m=export_pdf',
				data: {rows: rowsdata}
			});
		}
	});
	
	export_print_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_shiftkerja&m=cetak',
				data: {rows: rowsdata},
				success: function(response){
					win = window.open('./documents/shiftkerjalist.html','shiftkerja_list','height=400,width=900,resizable=1,scrollbars=1, menubar=1');
				}
			});
		}
	});
        
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
			txt_namashift.val("");
			txt_validto.val("");
			txt_keterangan.val("");
			
			txt_namashift.prop('disabled', false);
			shiftkerjaForm.jqxValidator('hide');
        }

        function cu_formSet(dataRecord){
            btn_shiftkerja = "UPDATE";
		txt_namashift.val(dataRecord.NAMASHIFT);
		txt_validto.val(dataRecord.VALIDTO);
		txt_keterangan.val(dataRecord.KETERANGAN);
		
		txt_namashift.prop('disabled', true);         
		formExpand();		
		txt_namashift.focus();
        }
	
	function cu_formDel(dataRecord){
		var row = {
				task: 'DELETE',
				namashift: dataRecord.NAMASHIFT
		};
		
		$.ajax({
			type: 'POST',
			url: 'index.php?c=c_shiftkerja&m=get_action',
			data: row,
			success: function(response){
				if(response==1){
					$('#jqxgrid').jqxGrid('updatebounddata');
					gridExpand();
				}
				else{
					createNotice(response);
				}
			}
		});
		
	}
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	navbar.jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	navbar.jqxNavigationBar('expandAt', 1);
        }
	function createNotice(msg){
			message_notice.html(msg);
			saving_notice.jqxWindow('show');
		saving_notice.jqxWindow('bringToFront');
        }
        /* END FUNCTION */
		
	navbar.bind('expandedItem', function (event) {
		if((event.item == 1) && (formExpandVar == 1) && (btn_shiftkerja == "UPDATE")){
			shiftkerja_task = "UPDATE";
		}else{
			shiftkerja_task = "CREATE";
		}
	});
	
	navbar.jqxNavigationBar('expandAt', 0);
	navbar.jqxNavigationBar('collapseAt', 1);
		
	});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 350;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="shiftkerjaForm" action="#">
		<table class="register-table">
			<tr>
				<td align="right" valign="top" width="120px">NAMA SHIFT:</td>
				<td align="left"><input id="sk_namashift" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">VALID TO:</td>
				<td align="left"><input id="sk_validto" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KETERANGAN:</td>
				<td align="left"><textarea id="sk_keterangan" maxlength="50" class="text-input" ></textarea></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
	<input id="exportExcelBtn" type="button" value="Export Excel" />
	<input id="exportPdfBtn" type="button" value="Export PDF" />
	<input id="exportPrintBtn" type="button" value="Print" />
</div>

<div id="saveGradeNotice">
    <div>Info</div>
    <div>
        <div id="eventLog"></div>
        <div style="float: right; margin-top: 15px;">
            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
        </div>
    </div>
</div>